<script setup lang="ts">
import { McMessage } from './components/UI';
import { ref } from 'vue'

const config = ref('new')

const a = ref('')

const MessageText = ref('Hello World! 你好世界！')

const ColorList = ref(
  [
    {
      name: 'default',
      color: "#212121"
    },
    {
      name: 'Success',
      color: "#008000"
    },
    {
      name: 'Info',
      color: "#036a96"
    },
    {
      name: 'Warning',
      color: "#b98f2c"
    },
    {
      name: 'Error',
      color: "#ff0000"
    },
  ]
)

</script>

<template>
  <mc-config :version="config">
    <div class="c">
      <h1>Minecraft Java UI - Vue3</h1>
      <div class="a">
        <p>Open Source Library | 开源库 </p>
        <pre>
          | Gitee => <a href="https://gitee.com/alwolf/Minecraft_Java_UI-Vue3" target="_blank">https://gitee.com/alwolf/Minecraft_Java_UI-Vue3</a>
          | Github => <a href="https://github.com/dbhg-studio/Minecraft-Java-UI-Vue3" target="_blank">https://github.com/dbhg-studio/Minecraft-Java-UI-Vue3</a>
          | License | 开源协议：MIT license
        </pre>
      </div>
      <div class="a">
        <p>Fonts | 字体 :</p>
        <pre>
 nicode usage font is not enabled -
 未启用Unicode使用字体：fontspace => <a href="https://www.fontspace.com/minecraft-font-f28180" target="_blank">https://www.fontspace.com/minecraft-font-f28180</a>
 
 Unicode usage fonts enabled -
 已启用Unicode使用字体：100font => <a href="https://www.100font.com/thread-143.htm" target="_blank">https://www.100font.com/thread-143.htm</a>
      
          ——————————————————————————————
 Unicode usage font is not enabled - 未启用Unicode使用字体
          | -- Minecraft_Regular
          | -- Minecraft_Italic
          | -- Minecraft_Bold
          | -- Minecraft_BoldItalic
        ——————————————————————————————
 Unicode usage fonts enabled - 已启用Unicode使用字体
          | -- unifont-15.0.01
        ——————————————————————————————
        </pre>

      </div>
      <div class="a">
        <p>Color | 色调：</p>
        <div class="color">
          <div class="box" v-for="i in ColorList" :key="i.name"
            :style="{ width: '100px', height: '100px', backgroundColor: i.color }">
            <span> {{ i.name }}</span>
            <span> {{ i.color }}</span>
          </div>
        </div>
      </div>
      <div class="a">
        <p>Config | 配置：</p>
        <mc-button @click="config = 'old'">Disable Unicode usage of fonts | 禁用Unicode使用字体</mc-button>
        <mc-button @click="config = 'new'">Enable Unicode usage of fonts | 启用Unicode使用字体</mc-button>
      </div>
      <div class="a">
        <p>Button | 按钮：</p>
        <mc-button>按钮</mc-button>
      </div>
      <div class="a">
        <p>Input | 输入框：</p>
        <mc-input v-model:value="a"></mc-input>
      </div>
      <div class="a">
        <p>Message (Adapted using the original achievement prompt box): </p>
        <p>消息弹窗（使用原版的成就提示框改编）：</p>
        <mc-button @click="McMessage.show(MessageText, null, 5000);">default | 默认</mc-button>
        <mc-button @click="McMessage.show(MessageText, 'success', 5000);">Success | 成功</mc-button>
        <mc-button @click="McMessage.show(MessageText, 'info', 5000);">Info | 信息</mc-button>
        <mc-button @click="McMessage.show(MessageText, 'warning', 5000);">Warning | 警告</mc-button>
        <mc-button @click="McMessage.show(MessageText, 'error', 5000);">Error | 错误</mc-button>
      </div>
    </div>
  </mc-config>
</template>

<style scoped lang="scss">
.c {
  .color {
    .box {
      span {
        position: relative;
        bottom: 10px;
      }

      margin: 5px;
      text-align: center;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: end;
    }

    display: flex;

  }

  .a {

    p {
      margin-bottom: 10px;
    }

    margin: 10px;
  }

  padding: 10px;
}

a {
  &:hover {
    color: rgba($color: aqua, $alpha: .5);
  }

  &:link {
    color: rgba($color: aqua, $alpha: .5);
  }

  color: #000;
  text-decoration: none;
}
</style>
